import { NavBar, DatePicker } from 'antd-mobile'
import { useState,useMemo } from 'react'
import './index.scss'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DayBill from './components/DayBill'

const Month = () => {
    //按月做数据分组
    const billList = useSelector(state => state.bill.billList)

    //usememo lodash 实现分组
    const monthGroup = useMemo(() => {
      return _.groupBy(billList, item => dayjs(item.date).format('YYYY-MM'))
    }, [billList])
    //console.log(monthGroup,'monthGroup')

    //控制弹窗的打开和关闭
    const [dateVisible, SetDateVisible] = useState(false)
    //控制时间显示
    const [currentDate, SetCurrentDate] = useState(()=>{
        return dayjs(new Date()).format('YYYY-MM')
    })
    //当前月的数据
    const [currenMonthList, SetCurrentMonthList] = useState([])

    //计算点击月份的数据
    const monthResult = useMemo(()=>{
        //判断当前月份是否有数据 在做数据处理
        if(!monthGroup[currentDate]) return {
            pay:0,
            income:0,
            balance:0
        }
        //支出 收入 结余
        const pay = currenMonthList.filter(item => item.type === 'pay').reduce((total, item) => total + item.money, 0);
        const income = Number(currenMonthList.filter(item => item.type === 'income').reduce((total, item) => total + item.money, 0));
        const balance = income - pay;
        console.log(pay,income,balance,'pay-income-balance');
        //转换为数字类型

        return {
            pay,
            income,
            balance
        }
        console.log(monthResult,'monthResult')
    },[currenMonthList])

    //页面初始化的时候，计算当前月份的数据
    useMemo(()=>{
        SetCurrentMonthList(monthGroup[currentDate] || [])
    },[monthGroup,currentDate])
    //存储当前月份的数据
    const onConfirm = (date) => {
        console.log(date,'日期')
        SetDateVisible(false)
        SetCurrentDate(dayjs(date).format('YYYY-MM'))
        SetCurrentMonthList(monthGroup[dayjs(date).format('YYYY-MM')])
    }


    //当前月按照日来分组
    const dayGroup = useMemo(() => {
        const groupData = _.groupBy(currenMonthList, item => dayjs(item.date).format('YYYY-MM-DD'))
        const keys = Object.keys(groupData).sort((a, b) => dayjs(b).valueOf() - dayjs(a).valueOf())
        return {
            groupData,
            keys
        }
      }, [currenMonthList])
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={()=> SetDateVisible(!dateVisible)}>
                        <span className="text">
                            {currentDate + ''} 月账单
                        </span>
                        {/* 控制类名 */}
                        <span className={classNames('arrow', dateVisible && 'expand' )}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.balance.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={dateVisible}
                        onCancel={()=> SetDateVisible(false)}
                        onConfirm={onConfirm}
                        onClose={()=> SetDateVisible(false)}
                        max={new Date()}
                    />
                </div>
                {/* 单日列表统计 */}
                <div>
                    {
                        dayGroup.keys.map(key => (
                            <DayBill
                            date={key}
                            billList={dayGroup.groupData[key]}
                            key={key}
                            />
                        ))
                    }
                </div>
            </div>
        </div >
    )
}

export default Month